<template>
  <div class="yg-notification" :style="{zIndex}">
    <notice v-for="(item) in notices" :key="item.id" :title="item.title" :content="item.content" :show="item.show" :id="item.id" :time="item.time" :_style="item.style" @close="handleClose" @after-leave="afterLeave"></notice>
  </div>
</template>

<script>
import notice from './notice'
export default {
  name: 'notification',
  components: {
    notice
  },
  data() {
    return {
      zIndex: 1001,
      notices: []
    }
  },
  methods: {
    add(notice) {
      if (!notice) return
      this.zIndex++
      this.notices.push(notice)
    },
    handleClose(notice) {
      if (!notice) return
      let index = this.notices.findIndex(item => item.id === notice.id)
      this.notices[index].show = false
    },
    afterLeave(notice) {
      let index = this.notices.findIndex(item => item.id === notice.id)
      this.notices.splice(index, 1)
      notice.$destroy()
    }
  }
}
</script>

<style lang="less" scoped>
.yg-notification {
  width: 385px;
  position: fixed;
  top: 24px;
  right: 10px;
}
</style>
